<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入Elementplus Css样式 -->
    <link rel="stylesheet" href="../../css/element-plus.css">
    <style>
        .el-aside {
            height: 90vh;
        }
        .el-col-12{
            max-width: 100%;
            flex:1 0 50%;
        }

    </style>
</head>
<div id="app">
    <div class="main">
        <!-- 面包屑 breadcrumb -->
        =       <div>
                    <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">后台数据</el-breadcrumb-item>
                    <el-breadcrumb-item>/热度统计</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
        <div style="margin-top: 20px;">
            <el-row>
            <el-col :span="12">
                <el-card>
                    <div id="chart4" style="width: 100%; height: 300px;"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div id="chart3" style="width: 100%; height: 300px;"></div>
                </el-card>
            </el-col>
            </el-row>
        </div>
</div>
<div class="tit"><h3>热度统计</h3></div>
<div id="global_hn_statistic" class="tab">
    <table style="border-collapse: collapse; width: 100%;">
        <thead>
        <tr style="background-color: #f2f2f2;">
            <th style="padding: 8px; text-align: left;">热度段</th>
            <th style="padding: 8px; text-align: left;">主播数量</th>
            <th style="padding: 8px; text-align: left;">主播占比</th>
            <th style="padding: 8px; text-align: left;">总热度</th>
            <th style="padding: 8px; text-align: left;">总热度占比</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="padding: 8px; text-align: left;">100w以上</td>
            <td style="padding: 8px; text-align: left;">52</td>
            <td style="padding: 8px; text-align: left;">0.14%</td>
            <td style="padding: 8px; text-align: left;">95,003,720</td>
            <td style="padding: 8px; text-align: left;">5.95%</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">100w~50w</td>
            <td style="padding: 8px; text-align: left;">163</td>
            <td style="padding: 8px; text-align: left;">0.43%</td>
            <td style="padding: 8px; text-align: left;">105,098,937</td>
            <td style="padding: 8px; text-align: left;">6.58%</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">50w~10w</td>
            <td style="padding: 8px; text-align: left;">2,516</td>
            <td style="padding: 8px; text-align: left;">6.59%</td>
            <td style="padding: 8px; text-align: left;">497,715,936</td>
            <td style="padding: 8px; text-align: left;">31.15%</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">10w~1w</td>
            <td style="padding: 8px; text-align: left;">23,630</td>
            <td style="padding: 8px; text-align: left;">61.9%</td>
            <td style="padding: 8px; text-align: left;">896,583,616</td>
            <td style="padding: 8px; text-align: left;">56.11%</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">1w~5k</td>
            <td style="padding: 8px; text-align: left;">401</td>
            <td style="padding: 8px; text-align: left;">1.05%</td>
            <td style="padding: 8px; text-align: left;">3,330,378</td>
            <td style="padding: 8px; text-align: left;">0.21%</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">5k~1k</td>
            <td style="padding: 8px; text-align: left;">10</td>
            <td style="padding: 8px; text-align: left;">0.03%</td>
            <td style="padding: 8px; text-align: left;">37,983</td>
            <td style="padding: 8px; text-align: left;">0.0%</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">1k~100</td>
            <td style="padding: 8px; text-align: left;">0</td>
            <td style="padding: 8px; text-align: left;">0%</td>
            <td style="padding: 8px; text-align: left;">0</td>
            <td style="padding: 8px; text-align: left;">0%</td>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left;">100~0</td>
            <td style="padding: 8px; text-align: left;">11,402</td>
            <td style="padding: 8px; text-align: left;">29.87%</td>
            <td style="padding: 8px; text-align: left;">4,111</td>
            <td style="padding: 8px; text-align: left;">0.0%</td>
        </tr>
        </tbody>
    </table>
</div>


<body>
<!-- 导入vue框架 -->
<script src="../../js/v3.2.8/vue.global.prod.js"></script>
<!-- 导入ElementPlus框架 -->
<script src="../../js/element-plus.js"></script>
<!-- 导入Elementplus Icon  -->
<script src="../../js/element-icons.js"></script>
<!--导入 Echarts-->
<script src="../../js/echarts.min.js"></script>
<script>
            //等待DOM加载完成
            document.addEventListener("DOMContentLoaded",function()
            {

                const chart4Dom = document.querySelector("#chart4")
                const chart3Dom = document.querySelector("#chart3")
                fetch("http://localhost:8080/webchatsai_war_exploded/echarts")
                    //检查响应是否成功
                    .then(response => response.json())
                    .then(data =>
                {//解析数据

                const chart4Option = {

                    title:
                        {
                            text: '主播数百分比'
                        },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.zhuboshuData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [
                                {
                                    value: 0.16,
                                    itemStyle:
                                        {
                                            color: '#9AFF9A'
                                        }
                                },
                                {
                                    value: 0.42,
                                    itemStyle:
                                        {
                                            color: '#87CEFF'
                                        }
                                },
                                {
                                    value: 6.54,
                                    itemStyle:
                                        {
                                            color: '#EEE685'
                                        }
                                },
                                {
                                    value: 65.61,
                                    itemStyle:
                                        {
                                            color: '#EE5C42'
                                        }
                                },
                                {
                                    value: 1.04,
                                    itemStyle:
                                        {
                                            color: '#EE82EE'
                                        }
                                },
                                {
                                    value: 0.04,
                                    itemStyle:
                                        {
                                            color: '#E0FFFF'
                                        }
                                },
                                {
                                    value: 0,
                                    itemStyle:
                                        {
                                            color: '#EE00EE'
                                        }
                                },
                                {
                                    value: 26.2,
                                    itemStyle:
                                        {
                                            color: '#87CEFF'
                                        }
                                },

                            ],
                            type: 'bar'
                        }
                    ]

                };
                initEcharts(chart4Dom, chart4Option);
                            const chart3Option =
                                {
                                    tooltip: {
                                        trigger: 'item'
                                    },
                                    legend: {
                                        top: '5%',
                                        left: 'center'
                                    },
                                    series: [
                                        {
                                            name: '按热度分段，总热度统计',
                                            type: 'pie',
                                            radius: ['40%', '70%'],
                                            avoidLabelOverlap: false,
                                            label: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {
                                                label: {
                                                    show: true,
                                                    fontSize: 40,
                                                    fontWeight: 'bold'
                                                }
                                            },
                                            labelLine: {
                                                show: false
                                            },
                                            data:
                                            data.data

                                        }
                                    ]
                                };


                            initEcharts(chart3Dom, chart3Option);
                        })
                    .catch(error => {
                        console.error("数据获取或解析出错:", error);
                    })
                });


            function initEcharts(dom, option)
            {
                //初始化实例
                const domEcharts = echarts.init(dom);
                //设置echarts 实例
                domEcharts.setOption(option);

            }



            // 应用使用element plus 组件
            app.use(ElementPlus);
            // "location" 参数对应<location>
            app.component("location" , ElementPlusIconsVue.Location)
            app.component("document" , ElementPlusIconsVue.Document)
            app.component("icon-menu" , ElementPlusIconsVue.Menu)
            app.component("setting" , ElementPlusIconsVue.Setting)

            //将应用挂载到 #app
            app.mount('#app');
    </script>
</body>
</div>

</html>